<html>
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <style type="text/css">
        body {
            padding: none;
            margin: none;
            background: rgba(100, 100, 0, 0.4);
        }

        #menu {
            width: 400px;
            height: 200px;
            margin: 150px auto;
            background: rgba(200, 200, 200, 0.8);
            border-radius: 20px;
            border: 2px solid rgba(20, 20, 20, 0.2);
        }

        #title {
            font-size: 22px;
            text-align: center;
            margin: 5px 10px;
        }

        #content {
            width: 220px;
            height: 100px;
            margin: 20px auto;
            text-align: center;
        }

        .btn {
            margin: 10px 10px;
            background: rgba(0, 10, 200, 0.6);
            display: inline-block;
            color: white;
            cursor: pointer;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border-radius: 10px;
        }
    </style>
    <script type="text/javascript" src="common.js"></script>
    <script type="text/javascript">
        function doLogin() {
            var requestParam = {};
            requestParam["username"] = $("username_text").value;
            requestParam["password"] = $("password_text").value;
            // 发起登录请求
            ajax({
                "url": "login?username="+requestParam["username"]+"&"+"password="+requestParam["password"],
                "type": "post",
                success: function (responseText) {
                    var result = JSON.parse(responseText);
                    if (result["success"]) {
                        alert("登录成功");
                    } else {
                        alert(result["msg"]);
                    }

                },
                fail: function (status) {
                    alert("请求失败：" + status);
                }
            });
        }

        function doClear() {
            $("username_text").value = "";
            $("password_text").value = "";
        }
    </script>
</head>
<body>
<div id="menu">
    <div id="title">登&nbsp;&nbsp;&nbsp;录</div>
    <table id="content">
        <tr>
            <td>用户名：</td>
            <td><input id="username_text" type="text" name="username"/></td>
        </tr>
        <tr>
            <td>密 码：</td>
            <td><input id="password_text" type="password" name="password"/></td>
        </tr>
        <tr>
            <td><span class="btn" id="login_btn" onclick="doLogin();">登录</span></td>
            <td><span class="btn" id="clear_btn" onclick="doClear();">清空</span></td>
        </tr>
    </table>
</div>

</body>
</html>